<!-- 在设计区域弹出层 dialog -->
<template>
  <div class="rightDialog" v-if="dialogShow" :style="'z-index: '+zIndex+';'">
    <transition name="el-fade-in-linear"><div class="mask-rd" @click.stop="dialogClose"></div></transition>
    <div :class="{'right-dialog': true, 'design-dialog-nofoot': !hasfooter, 'dialogShow': dialogShow, 'dialogHide': !dialogShow}"
      ref="designDialog">
      <div class="dialog-in">
        <div class="dia-header">
          <span>{{title}}</span>
          <div class="close-opt" @click.stop="dialogClose"><i class="el-icon-close"></i></div>
        </div>
        <transition name="el-fade-in-linear">
          <div class="dia-main">
              <slot></slot>
          </div>
        </transition>
        <div class="dia-footer" v-if="this.hasfooter">
          <el-button size="small" @click.stop="dialogClose">取消</el-button>
          <el-button type="primary" size="small" v-if="typeof this.saveclose === 'function'" @click.stop="saveclose">
            保存</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import 'element-ui/lib/theme-chalk/base.css'
import PubSub from 'pubsub-js'
import * as PubsubType from '@/config/pubsubtype.js'
export default {
  props: {
    // 显示的title
    title: {
      type: String,
      default: ''
    },
    // 是否显示
    dialogVisible: {
      type: Boolean,
      default: false
    },
    // 是否有底部按钮
    hasfooter: {
      type: Boolean,
      default: true
    },
    // 关闭方法
    close: {
      type: Function
    },
    // 保存并且关闭
    saveclose: {
      type: Function
    },
    // 层级别
    zIndex: {
      type: Number,
      default: 999
    },
    // 弹窗宽度
    rWidth: {
      type: Number,
      default: 900
    }
  },
  created () {
    PubSub.publish(PubsubType.PUBSUB_DIGLOG_COMPONENT_CLOSE, this.title)
    PubSub.publish(PubsubType.PUBSUB_DIGLOG_COMPONENT_AND_CONTAINER_CLOSE, this.title)
  },
  mounted () {
  },
  data () {
    return {
      // 是否显示
      dialogShow: this.dialogVisible
    }
  },
  computed: {
  },
  watch: {
    dialogVisible: {
      handler () {
        this.dialogShow = this.dialogVisible
      },
      deep: true
    }
  },
  methods: {
    dialogClose () {
      this.dialogShow = false
      this.close()
    }
  }
}

</script>

<style scoped lang="scss">
.rightDialog{
  position: absolute;
  .mask-rd{
    position: fixed;
    z-index: 99;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background:#000;
    opacity: 0.5;
  }
  .right-dialog {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    background: #fff;
    z-index: 100;
    .dia-header {
      position: relative;
      color: #333;
      font-weight: bold;
      font-size: 16px;
      padding: 16px 25px;
      border-bottom: 1px solid #e9e9e9;

      .close-opt {
        position: absolute;
        right: 17px;
        top: 12px;
        font-size: 22px;
        color: #999;
        cursor: pointer;

        &:hover {
          color: #333;
        }
      }
    }

    .dia-main {
      padding: 10px 25px 15px;
    }

    .dia-footer {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      text-align: right;
      padding: 15px 25px;

      .el-button {
        -webkit-border-radius: 30px;
        border-radius: 30px;
      }
    }
  }
}
</style>
